<template>
  <a-modal width="40%" v-model="modal2Visible" :title="title" centered @ok="congif">
    <a-spin tip="Loading..." :spinning="spin">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="巡检人员" prop="createBy">
          <a-input v-model="form.createBy" type="text" placeholder="请填写巡检人员"/>
        </a-form-model-item>
        <a-form-model-item label="巡检设备" prop="deviceId">
          <a-select show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange" v-model="form.deviceId" placeholder="请填写巡检设备">
            <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{ item.deviceName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="巡检开始时间" required prop="startTime">
          <a-date-picker v-model="form.startTime" style="width: 100%" show-time>
          </a-date-picker>
        </a-form-model-item>
        <a-form-model-item label="巡检结束时间" required prop="endTime">
          <a-date-picker style="width: 100%" v-model="form.endTime" show-time>
          </a-date-picker>
        </a-form-model-item>
        <a-form-model-item label="巡检状态" prop="inspectionStatus">
          <a-select v-model="form.inspectionStatus" placeholder="请填写巡检状态">
            <a-select-option value="0">正常</a-select-option>
            <a-select-option value="1">异常</a-select-option>
          </a-select>
        </a-form-model-item>
        <!--        <a-form-model-item label="处理结果" prop="handleResult">-->
        <!--          <a-radio-group v-model="form.handleResult">-->
        <!--            <a-radio value="1">未解决</a-radio>-->
        <!--            <a-radio value="0">解决</a-radio>-->
        <!--          </a-radio-group>-->
        <!--        </a-form-model-item>-->
        <a-form-model-item label="异常原因" prop="faultReason" placeholder="请填写异常原因">
          <a-input v-model="form.faultReason" type="textarea"/>
        </a-form-model-item>
        <a-form-model-item label="巡检内容" prop="inspectionContent" placeholder="请填写巡检内容">
          <a-input v-model="form.inspectionContent" type="textarea"/>
        </a-form-model-item>
        <a-form-model-item label="巡检图片" prop="inspectionPic">
          <j-image-upload isMultiple v-model="form.inspectionPic"></j-image-upload>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>


function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

import {list, add, queryById, edit,query} from '@/api/device.js'

export default {
  data() {
    return {
      title: '新增设备',
      list: [],
      modal2Visible: false,
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      other: '',
      spin: true,
      form: {
        deviceId: undefined, //设备id
        startTime: '', // 巡检开始时间
        endTime: '', // 巡检结束时间
        faultReason: '',  // 故障原因
        handleResult: '', //处理结果
        handleWay: '', // 处理方法
        inspectionContent: '',  // 	巡检内容
        inspectionPic: [], // 巡检图片
        inspectionStatus: undefined, // 巡检状态
        inspectionType: '', // 	巡检类型
        createBy: '' // 巡检人
      },
      rules: {
        deviceId: [{required: true, message: '请选择设备类型', trigger: 'blur'}],
        startTime: [{required: true, message: '请选择巡检开始时间', trigger: 'blur'}],
        endTime: [{required: true, message: '请选择巡检结束时间', trigger: 'blur'}],
        faultReason: [{required: true, message: '请输入故障原因', trigger: 'blur'}],
        handleResult: [{required: true, message: '请选择故障原因', trigger: 'blur'}],
        handleWay: [{required: true, message: '请输入处理方法', trigger: 'blur'}],
        inspectionContent: [{required: true, message: '请输入巡检内容', trigger: 'blur'}],
        inspectionPic: [{required: true, message: '请上传图片', trigger: 'blur'}],
        inspectionStatus: [{required: true, message: '请选择巡检状态', trigger: 'blur'}],
        inspectionType: [{required: true, message: '请选择巡检类型', trigger: 'blur'}],
        createBy: [{required: true, message: '请选择巡检人', trigger: 'blur'}],
      },
      previewVisible: false,
      previewImage: '',
      fileList: []
    }
  },
  methods: {
    init(id) {
      this.spin = true
      if (this.title == '新增设备') {
        query().then(res => {
          this.list = res.result
          this.spin = false
        }).catch(err => {
          this.spin = false
        })
        this.resetForm()
      } else if (this.title == '详情') {
        query().then(res => {
          console.log(res)
          this.list = res.result
          this.spin = false
        }).catch(err => {
          this.spin = false
        })
        queryById(id).then(res => {
          this.form = res.result
          this.spin = false
        }).catch(err => {
          this.spin = false
        })
      }
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    congif() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.title == '新增设备') {
            add(this.form).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.$message.success('添加成功');
                this.modal2Visible = false
                this.$parent.dataList(1, 10)
              }
            }).catch(err => {
              this.modal2Visible = false
            })
          } else if (this.title == '详情') {
            edit(this.form).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.$message.success('修改成功');
                this.modal2Visible = false
              }
            }).catch(err => {
              this.modal2Visible = false
            })
          }

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible
    },
    resetForm() {
      if (this.$refs.ruleForm !== undefined) {
        this.$refs.ruleForm.resetFields();
      }
    },
    handleCancel() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    }
  }
}
</script>